<template>
	<view class="BJ">
		<view class="w100">
			<image class="BJimg" src="../../../static/iconyaoqing.png" mode=""></image>
		</view>
		<!-- 返回按钮 -->
		<image class="fanhui" src="../../../static/iconfanhui.png" mode=""></image>
		<!-- 商品 -->
		<image class="shangpin imgcenter" src="../../../static/28a3b451f81986184a86281a4aed2e7389d4e6a0.jpg" mode=""></image>
		<!-- 商品送出件数 -->
		<view class="SCjianshu imgcenter fs19">
			已送出 1266 件
		</view>
		<!-- 过期时间 -->
		<view class="expiration imgcenter fs12">
			23:59:29后过期
		</view>
		<!-- 已砍价 -->
		<view class="bargain fs19">
			1199.88
		</view>
		<!-- 仅差  -->
		<view class="onli imgcenter">
			11.8
		</view>
		<!-- 邀请好友 免费拿 -->
		<view class="YQhaoyou imgcenter"></view>
		<!--  -->
		<view class="w342">
			<view class="w342-top fs15" style="height: 100rpx;display: flex;text-align: center;line-height: 100rpx;border-bottom: 1rpx solid #FFFFFF;">
				<view><text :class="tixian==true?'borderBottom':''" @click="tixian=true">砍成晒单</text></view>
				<view><text :class="tixian==false?'borderBottom':''" @click="tixian=false">提现记录</text></view>
			</view>
			<!-- 好友晒单 -->
			<view v-if="tixian" class="list w342-top" style="margin-top: 20rpx;position: relative;height: 280rpx;" v-for="item in 8">
				<image src="../../../static/22.png" mode=""></image>
				<view class="w80">
					<view style="display: flex;">
						<view class="fs13" style="color: rgba(155,82,53,1);">朋克大人</view>
						<!-- 判断是否为好友 -->
						<view class="fs12 haay" style="color: #FFFFFF;">好友</view>
						<view class="fs11" style="color: rgba(254,243,238,1);margin-left: 18rpx;"> 2020.12.26 </view>
					</view>
					<view class="fs12" style="margin-top: 20rpx;color: rgba(196,96,44,1);">
						免费拿到【苏泊尔榨汁机】，省了229元					``														
					</view>
					<image style="width: 160rpx;height: 160rpx;margin-top: 20rpx;" src="../../../static/28a3b451f81986184a86281a4aed2e7389d4e6a0.jpg" mode=""></image>
				</view>
			</view>
			<!--  提现记录-->
			<view v-else class="list w342-top" style="height: 148rpx;margin-top: 20rpx;position: relative;">
				<image src="../../../static/22.png" ></image>
				<view class="w80">
					<view class="fs12">
						<text>一枝独秀</text>
					</view>
					<view class="fs10" style="position: relative;">2020.12.26 
						<text class="fs12" style="position: absolute;right: 8%;">已获取 100元</text> 
					</view>
					<view class="fs10" style="word-wrap: break-word;margin-top: 20rpx;">
						邀请了8名好友，获取100元现金红包，商家已发放							``														
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tixian:true
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.BJ {
		width: 100vw;
		height: 2000rpx;
		background: #FF7140;
		position: relative;
	}
	.fanhui {
		width: 18rpx;
		height: 32rpx;
		position: absolute;
		left: 28rpx;
		top: 90rpx;
	}
.BJimg {
		width: 750rpx;
		height: 1624rpx;
		position: absolute;
		top: 0;
	}
.zhezhaoc{
		width: 300rpx;
		height: 100rpx;
		background: #FFD08C;
		position: absolute;
		top: 50rpx;
		right: 0;
	}
.imgcenter{
	left: 50%;
	transform: translateX(-50%);
}
.shangpin{
	width: 182rpx;
	height: 242rpx;
	position: absolute;
	top: 214rpx;
}
.SCjianshu{
	font-weight: 700;
	color: #FFFFFF;
	position: absolute;
	top: 492rpx;
}
.expiration{
	color: rgba(135,52,24,1);
	position: absolute;
	top: 622rpx;
}
.bargain{
	width: 154rpx;
	height: 60rpx;
	color: #F94D31;
	font-weight: 700;
	text-align: right;
	position: absolute;
	top: 692rpx;
	left: 29.5%;
}
.onli{
	font-size: 52rpx;
	color: rgba(225,56,43,1);
	font-weight: 700;
	position: absolute;
	top: 774rpx;
	left: 48%;
}
.YQhaoyou{
	width: 416rpx;
	/* height: 72rpx; */
	border-radius: 36rpx;
	position: absolute;
	top: 926rpx;
}
.w342{
		width: 684rpx;
		height:800rpx;
		background: rgba(255,255,255,0.3);
		overflow: scroll;
		position: absolute;
		top: 1100rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.w342-top{
		width: 90%;
		margin: 0 auto;
	}
	.w342-top>view{
		width: 50%;
		color: rgba(251,249,212,1);
	}
	.haay{
		width: 70rpx;
		height: 40rpx;
		margin-left: 28rpx;
		text-align: center;
		line-height: 40rpx;
		background: rgba(255,85,41,1);
		border-radius: 17rpx;
	}
	.borderBottom{
		padding: 20rpx 0;
		border-bottom: 8rpx solid rgba(251,249,212,1);
	}
	.list>image{
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		position: absolute;
		left: 34rpx;
		top: 22rpx;
	}
	.w80{
		width: 80%!important;
		transform: scale(0.9);
		position: absolute;
		left: 20%;
		top: 15rpx;
	}
</style>
